<template>
	<view>
		<nav-bar type="transparentFixed" :scrollTop="scrollTop" :titleCenter="false" backState="2000" bgColor="#202020" fontColor="#FFF">
			<view class="search_box white" @click="onPageJump('/pages/home/search')">
				<image src="../../static/icon/ic_shop_search.png" mode="aspectFit"></image>
				<text>关键字</text>
			</view>
			<view class="search_box" slot="transparentFixed" @click="onPageJump('/pages/home/search')">
				<image src="../../static/icon/shortVideo/ic_search.png" mode="aspectFit"></image>
				<text>关键字</text>
			</view>
		</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <!-- banner-->
            <view class="banner_swiper_box">
                <swiper
                    class="banner_swiper"
                    :indicator-dots="true"
                    :autoplay="true"
                    :interval="3000"
                    circular
                    :duration="1000"
                    indicator-color="rgba(255, 255, 255, 0.4)"
                    indicator-active-color="rgba(255, 255, 255, 1)"
                    @change="onSwiperChange"
                >
                    <swiper-item v-for="(item, index) of bannerList" :key="index">
                        <view class="banner_img" :class="{ active: swiperIndex == index }"><image :src="item.imgUrl" mode="aspectFill" @click="onBanner(item)"></image></view>
                    </swiper-item>
                </swiper>
            </view>
            <!-- 分隔-->
            <view class="goods_guarantee_box">
                <view class="guarantee_a">100%正品</view>
                <view class="guarantee_b">全场免邮</view>
                <view class="guarantee_c">退换无忧</view>
            </view>
            <!-- 商品区域-->
            <view class="goods_recommend_box">
                <view
                    class="recommend_left"
                    v-if="recommendList.length > 0"
                    @click="onPageJump('/pages/home/shop/recommendList?objId=' + recommendList[0].objId + '&title=' + recommendList[0].title)"
                >
                    <image v-if="recommendList[0].adImg.length > 0" :src="recommendList[0].adImg[0]"></image>
                </view>
                <view class="recommend_right">
                    <image
                        v-if="recommendList.length > 1"
                        @click="onPageJump('/pages/home/shop/recommendList?objId=' + recommendList[1].objId + '&title=' + recommendList[1].title)"
                        :src="recommendList[1].adImg[0]"
                    ></image>
                    <image
                        v-if="recommendList.length > 2"
                        @click="onPageJump('/pages/home/shop/recommendList?objId=' + recommendList[2].objId + '&title=' + recommendList[2].title)"
                        :src="recommendList[2].adImg[0]"
                    ></image>
                </view>
            </view>
            <!--菜单-->
            <view class="menu_box">
                <view @click="onPageJump('/pages/home/shop/goodsList?sortType=3003')">
                    <image src="../../static/icon/light/ic_function_a.png"></image>
                    <text>爆款推荐</text>
                </view>
                <view @click="onPageJump('/pages/home/shop/goodsList')">
                    <image src="../../static/icon/light/ic_function_c.png"></image>
                    <text>新品推荐</text>
                </view>
                <view @click="onPageJump('/pagesMy/my/about')">
                    <image src="../../static/icon/light/ic_function_d.png"></image>
                    <text>品牌介绍</text>
                </view>
            </view>
            <!-- 品牌精选 -->
            <view class="select_word">
                <image src="../../static/icon/light/hot.png"></image>
                <text>早10晚8上新 200+品牌疯抢中</text>
            </view>
            <!-- 精选图 -->
            <view class="brand_select_box">
                <view v-for="(item, index) of recommendList" :key="index">
                    <image v-if="index > 2" :src="item.adImg[0]" @click="onPageJump('/pages/home/shop/recommendList?objId=' + item.objId + '&title=' + item.title)" mode="aspectFill"></image>
                </view>
            </view>
            <!-- 商品排序 -->
            <view class="goods_sort_box">
                <view :class="{ active: sortType == 3000 }" @click="onSortType(3000)">智能排序</view>
                <view :class="{ active: sortType == 3002 }" @click="onSortType(3002)">好评优先</view>
                <view :class="{ active: sortType == 3001 }" @click="onSortType(3001)">低价优先</view>
                <view :class="{ active: sortType == 3003 }" @click="onSortType(3003)">销量优先</view>
            </view>
            <waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
        </mescroll-body>
		<view class="video_box" v-if="videoShow" @click="onCloseVideo"><video :src="videoUrl" autoplay="true" controls></video></view>
		<!-- 优惠券弹框 -->
		<view class="bullet_mask" v-if="bulletShow" @click="bulletShow = false"><image :src="bulletInfo.img" @click.stop="onCollarCouponByPopup" mode="widthFix"></image></view>
        <attention-public v-model="showPopup" :showBtn="true"></attention-public>
	</view>
</template>

<script>
import waterfallGoods from '@/components/module/waterfall_goods';
import navBar from '@/components/common/zhouWei-navBar/index.vue';
// #ifdef MP-WEIXIN
import { onLogin } from '@/config/login';
// #endif
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		waterfallGoods,
        attentionPublic
	},
	data() {
		return {
			videoUrl: '',
			videoShow: false,
			bulletShow: false,
			bulletInfo: {},
			sortType: 3000,
			scrollTop: 0,
			goodsDataList: [],
			swiperIndex: 0,
			bannerList: [],
			recommendList: [],
            downOption: {
            	auto: false //是否在初始化后,自动执行downCallback; 默认true
            },
            showPopup: false,
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		this.pageData();
	},
	//页面显示
	onShow() {
		if (this.userInfo.token) {
			this.getCoupon();
		}else{
            // #ifdef MP-WEIXIN
            onLogin("try",() => {
            	this.getCoupon();
            });
            // #endif
        }
	},
	//方法
	methods: {
		//领取优惠券
		onCollarCoupon(item) {
			this.judgeLogin(() => {
				this.$http
					.get('api/open/v1/receive_discount_voucher', {
						objId: item.objId
					})
					.then(res => {
						uni.showToast({
							title: '领取成功,请到我的里面查看',
							icon: 'none'
						});
					});
			});
		},

		//获取优惠券弹窗信息
		getCoupon() {
			this.$http.get('api/open/v1/bullet_box').then(res => {
				if (res && res.voucherId) {
					this.bulletShow = true;
					this.bulletInfo = res;
				}
			});
		},
		//领取弹框优惠券
		onCollarCouponByPopup() {
			this.$http
				.get('api/open/v1/receive_discount_voucher', {
					objId: this.bulletInfo.voucherId
				})
				.then(res => {
					this.bulletShow = false;
					uni.showToast({
						title: '领取成功,请到我的里面查看',
						icon: 'none'
					});
				});
		},
		pageData() {
			// 轮播图接口
			this.$http
				.post('api/open/v1/lunbo', {
					locatType: 1101
				})
				.then(res => {
					this.bannerList = res;
				});
			// 菜单列表
			this.$http
				.get('api/mall/goods/v1/type', {
					type: 1401
				})
				.then(res => {
					if (res.length > 8) {
						this.menuList = res.splice(0, 8);
					} else {
						this.menuList = res;
					}
				});
			this.$http.get('api/shopAd_category/v1/mall_list_data').then(res => {
				this.recommendList = res;
			});
		},
		onSortType(type) {
			this.sortType = type;
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 轮播图点击
		onBanner(item) {
			if (item.jumpType == 1501) {
				uni.navigateTo({
					url: '/pages/home/shop/shop?objId=' + item.jumpRecord.id
				});
			} else if (item.jumpType == 1502) {
				uni.navigateTo({
					url: '/pages/home/shop/goodsDetail?objId=' + item.jumpRecord.id
				});
			} else if (item.jumpType == 1601) {
				uni.navigateTo({
					url: '/pagesMy/my/about'
				});
			} else if (item.jumpType == 1201) {
				this.setWebViewUrl(item.jumpRecord.webViewUrl);
				uni.navigateTo({
					url: '/pages/home/webView'
				});
			} else if (item.jumpType == 1301) {
				this.videoUrl = item.jumpRecord.videoUrl;
				this.videoShow = true;
			} else if (item.jumpType == 1101) {
				uni.navigateTo({
					url: item.jumpRecord.webViewUrl
				});
			}
		},
		// 排序选择
		onSortType(val) {
			this.sortType = val;
			this.mescroll.triggerDownScroll();
		},
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                sortType: this.sortType
            };
            if(this.typeId){
            	httpData.typeId = this.typeId;
            }
            this.$http
            	.post('api/mall/goods/v1/list', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		
            		if (pageNo == 1) {
            			this.goodsDataList = res.data;
            		} else {
            			this.goodsDataList = this.goodsDataList.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
		// 轮播图变化
		onSwiperChange(e) {
			this.swiperIndex = e.detail.current;
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.search_box {
	width: 686rpx;
	height: 64rpx;
	background-color: rgba(0,0,0,0.2);
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	&.white {
		background-color: rgba(255,255,255,0.2);
	}
	image {
		width: 30rpx;
		height: 29rpx;
	}
	text {
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}
}
.bullet_mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 80%;
	}
}
.video_box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;

	video {
		width: 100%;
	}
}
.banner_swiper_box {
	position: relative;
	width: 100%;
	height: 448rpx;
	display: block;
	.banner_swiper {
		position: absolute;
		width: 100%;
		height: 448rpx;
		display: block;
		image {
			width: 100%;
			height: 448rpx;
			background-size: 100% auto;
		}
	}
}
.goods_guarantee_box {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 55rpx 40rpx 49rpx;
	font-size: 24rpx;
	color: #333333;
	background-color: #fff;
	.guarantee_a {
		display: flex;
		&::before {
			content: '';
			background-image: url(../../static/icon/light/ic_service_a.png);
			height: 32rpx;
			width: 32rpx;
			background-size: 100% 32rpx;
			margin-right: 10rpx;
		}
	}
	.guarantee_b {
		display: flex;
		&::before {
			content: '';
			background-image: url(../../static/icon/light/ic_service_b.png);
			height: 32rpx;
			width: 32rpx;
			background-size: 100% 32rpx;
			margin-right: 10rpx;
		}
	}
	.guarantee_c {
		display: flex;
		&::before {
			content: '';
			background-image: url(../../static/icon/light/ic_service_c.png);
			height: 32rpx;
			width: 32rpx;
			background-size: 100% 32rpx;
			margin-right: 10rpx;
		}
	}
}
.goods_recommend_box {
	background-color: #fff;
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
	.recommend_left {
		display: flex;
		image {
			width: 284rpx;
			height: 436rpx;
			background-size: 284rpx 436rpx;
		}
	}
	.recommend_right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		image {
			width: 422rpx;
			height: 216rpx;
			background-size: 422rpx 216rpx;
		}
	}
}
.menu_box {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 46rpx;
	background-color: #fff;
	view {
		flex-direction: column;
		background-color: #fff;
		image {
			height: 88rpx;
			width: 88rpx;
			background-size: 100% auto;
		}
		text {
			font-size: 24rpx;
			color: #333333;
			text-align: center;
		}
	}
}
.select_word {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0 0 0;
	background-color: #fff;
	image {
		height: 35rpx;
		width: 308rpx;
		background-size: 100% auto;
	}
	text {
		font-size: 20rpx;
		color: #333333;
		margin-top: 10rpx;
	}
}
.brand_select_box {
	padding: 30rpx 20rpx 40rpx 20rpx;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	image {
		width: 710rpx;
		height: 390rpx;
		background-size: 100% auto;
		margin: 10rpx 0;
	}
}
.goods_type_box {
}
.goods_sort_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
	font-size: 28rpx;
	background-color: #fff;

	> view {
		padding: 30rpx 0rpx;
		white-space: nowrap;
		color: #333333;
		opacity: 0.5;
		position: relative;
		flex: 1;
		text-align: center;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			width: 1rpx;
			right: 0;
			height: 24rpx;
			transform: translateY(-50%);
			background: #cccccc;
		}

		&:last-child::before {
			content: inherit;
			width: 0;
		}
	}

	.active {
		opacity: 1;
		font-weight: bold;
	}
}
.goods_list_info {
	display: flex;
	padding: 0 24rpx;
	background-color: #fff;

	.goods_info {
		display: flex;
		flex-direction: column;
		height: 560rpx;
		width: 345rpx;
		box-shadow: 0px 5px 5px #cccccc;

		image {
			width: 345rpx;
			height: 400rpx;
			background-size: 100% auto;
		}
		.goods_info_a {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 24rpx;
			.brand_name {
				font-size: 24rpx;
				color: #333333;
			}
			.goods_name {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
			text {
				font-size: 28rpx;
				color: #f23a3a;
			}
		}
	}
}
</style>
